<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>LayIM测试</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js"></script>


</head>
<body>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/layui/axios-0.18.0.js"></script>
<script>
    var socket;
    layui.use('layim', function (layim) {
        var path = "ws://localhost:8001/api/chat/" + document.getElementById("wid").value;
        socket = new WebSocket(path);
        socket.onopen = function (evn) {
            console.log(evn);
            // for (var i=0;i<JSON.parse(document.getElementById("friends").value)[0].list.length;i++)
            // {
            //    if("hide"=== JSON.parse(document.getElementById("friends").value)[0].list[i].status)
            //    {
            //        layim.setFriendStatus(JSON.parse(document.getElementById("friends").value)[0].list[i].id, 'offline');
            //    }
            // }
        };
        socket.onmessage = function (evn) {
            if (evn != null) {
                console.log(JSON.parse(evn.data).emit);
                console.log('ss');
                if (JSON.parse(evn.data).emit === 'addlist') {
                    layim.addList(JSON.parse(evn.data).data);
                } else if (JSON.parse(evn.data).emit === 'status') {
                    console.log(JSON.parse(evn.data).data);
                    if (JSON.parse(evn.data).data === "online") {
                        layim.setFriendStatus(JSON.parse(evn.data).id, "online");
                    } else {
                        layim.setFriendStatus(JSON.parse(evn.data).id, "offline");
                    }

                } else {
                    layim.getMessage(JSON.parse(evn.data));
                }
            }
        };

        socket.onclose = function () {
            console.log("关闭");
        };
        layim.config({
            //是否简约模式（如果true则不显示主面板)
            brief: false,
            init: {
                mine: JSON.parse(document.getElementById("mines").value),
                friend: JSON.parse(document.getElementById("friends").value),
            },
            //用户昵称
            title: JSON.parse(document.getElementById("mines").value).username,
            //聊天窗口背景图
            initSkin: "5.jpg",
            //开启提醒
            notice: true,
            //图片上传
            uploadImage: {
                url: '/api/chats/Chatpictures' //接口地址
                , type: 'post' //默认post
            }

        })
        layim.on("sendMessage", function (res) {
            console.log(res);
            let time = new Date().getTime();
            socket.send(JSON.stringify(
                {
                    "type": "send",
                    "data": res,
                    "time": time
                }
            ));
        })
        layim.on('online', function (status) {
            socket.send(JSON.stringify(
                {
                    "type": "status",
                    "data": status,
                    "id": document.getElementById("wid")
                }
            ));
            //此时，你就可以通过Ajax将这个状态值记录到数据库中了。
            //服务端接口需自写。
        });


        // layim.setFriendStatus(document.getElementById("friends").value.list.id, 'online'); //设置指定好友在线，即头像取消置灰
        // layim.setFriendStatus(document.getElementById("friends").value.list, 'offline'); //设置指定好友在线，即头像置灰
    });

    function add() {
        socket.send(JSON.stringify(
            {
                "type": "add",
                "uid": document.getElementById("wid").value,
                "fid": 123
            }
        ))

    }
</script>
<script>

</script>
<input th:value="${id}" id="wid" type="hidden">
<input type="hidden" th:value="${friend}" id="friends">
<input type="hidden" th:value="${mine}" id="mines">
<button type="button" th:onclick="add()">添加</button>
</body>
</html>